<template>
    <div class="cart">
        <h2>购物车</h2>
        <!-- 如果购物车为空，则显示提示信息 -->
        <div v-if="items.length === 0">购物车为空</div>
        <!-- 使用 TransitionGroup 为购物车项添加动画效果 -->
        <TransitionGroup name="fade" tag="div">
            <!-- 遍历购物车中的商品并渲染每个商品的详细信息 -->
            <div class="cart-item" v-for="item in items" :key="item.id">
                <h3>{{ item.name }}</h3>
                <p>数量: {{ item.quantity }}</p>
                <p>价格: {{ item.price }} 元</p>
                <!-- 按钮，点击时触发移除商品的事件 -->
                <button @click="removeItem(item.id)">移除</button>
            </div>
        </TransitionGroup>
    </div>
</template>

<script setup>
// 定义接收的 props，包含购物车商品数组
const props = defineProps(['items']);
// 定义 emit 事件，用于向父组件发送移除商品的事件
const emit = defineEmits(['remove-item']);

// 从购物车中移除商品的函数
const removeItem = (itemId) => {
    // 触发 remove-item 事件，并传递被移除商品的 ID
    emit('remove-item', itemId);
};
</script>

<style scoped>
.cart {
    margin-bottom: 20px; /* 设置购物车底部的间距 */
}

.cart-item {
    border: 1px solid #ccc; /* 为每个购物车项添加边框 */
    padding: 10px; /* 内边距 */
    margin-bottom: 10px; /* 每个购物车项之间的间距 */
}

/* Transition 动画样式 */

/* 翻转 */
.fade-enter-active, 
.fade-leave-active {
    /* 设置元素在进入和离开动画过程中执行的过渡效果 */
    transition: opacity 0.5s, /* 设置透明度变化的过渡效果，持续时间为 0.5 秒 */
                transform 0.5s; /* 设置旋转的过渡效果，持续时间为 0.5 秒 */
}

.fade-enter-from, 
.fade-leave-to {
    /* 设置元素在进入开始时和离开结束时的初始样式 */
    opacity: 0; /* 透明度设为 0，使元素初始状态为完全透明 */
    transform: rotateY(180deg); /* 使用 Y 轴旋转 180 度，使元素从后向前翻转的效果 */
}

/* 动画相关类解释
1. 进入动画相关类：
   - <Transition> 或 <TransitionGroup> 组件用于包裹需要添加动画的元素。
   - fade-enter-active: 在进入动画期间应用的类，用于定义过渡效果。
   - fade-enter-from: 定义元素进入时的初始样式，例如：opacity: 0。
   - fade-enter-to: 定义元素进入时的最终样式，默认情况下为 opacity: 1。
   
2. 离开动画相关类：
   - fade-leave-active: 在离开动画期间应用的类，用于定义过渡效果。
   - fade-leave-from: 定义元素离开时的初始样式，通常不需要显式定义。
   - fade-leave-to: 定义元素离开时的最终样式，例如：opacity: 0。
*/
</style>